<template>
  <a-modal
    v-model:open="visible"
    title="操作对比"
    :width="modelWidth"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="comparison-container">
      <a-row :gutter="16">
        <a-col :span="12"
          ><div class="comparison-section">
            <h3 class="section-title">修改前策略详情</h3>
            <a-table
              :columns="columns"
              :data-source="beforeData"
              :pagination="false"
              bordered
            >
              <template #bodyCell="{ column, text }">
                <template
                  v-if="
                    column.dataIndex === 'activePower' ||
                    column.dataIndex === 'socLimit'
                  "
                >
                  <span>{{ text }}</span>
                </template>
              </template>
            </a-table>
          </div></a-col
        >
        <a-col :span="12"
          ><div class="comparison-section">
            <h3 class="section-title">修改后策略详情</h3>
            <a-table
              :columns="columns"
              :data-source="afterData"
              :pagination="false"
              bordered
            >
              <template #bodyCell="{ column, text }">
                <template
                  v-if="
                    column.dataIndex === 'activePower' ||
                    column.dataIndex === 'socLimit'
                  "
                >
                  <span>{{ text }}</span>
                </template>
              </template>
            </a-table>
          </div></a-col
        >
      </a-row>
    </div>
  </a-modal>
</template>

<script setup>
// 
const modelWidth = computed(() => (window.innerWidth > 1805 ? "75%" : "85%"))
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  comparisonData: {
    type: Object,
    default: () => ({
      before: [],
      after: [],
    }),
  },
})

const emit = defineEmits(["update:visible"])

const visible = ref(props.visible)
// 示例数据
const beforeData = ref([])

const afterData = ref([])
watch(
  () => props.visible,
  (val) => {
    visible.value = val
  }
)
watch(
  () => props.comparisonData,
  (val) => {
    beforeData.value = val.before
    afterData.value = val.after
  },
  {
    deep: true,
  }
)
const columns = [
  {
    title: "开始时间",
    dataIndex: "start",
    key: "start",
    width: "25%",
  },
  {
    title: "结束时间",
    dataIndex: "end",
    key: "end",
    width: "25%",
  },
  {
    title: "有功功率(KW)",
    dataIndex: "activePower",
    key: "activePower",
    width: "25%",
  },
  {
    title: "SOC限制值(%)",
    dataIndex: "socLimit",
    key: "socLimit",
    width: "25%",
  },
]

const handleCancel = () => {
  emit("update:visible", false)
}
</script>

<style lang="less" scoped>
.comparison-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.comparison-section {
  width: 100%;
}

.section-title {
  margin-bottom: 10px;
  font-weight: bold;

  .example-text {
    color: #1890ff;
    font-size: 14px;
    font-weight: normal;
  }
}
</style>
